<juci-layout-with-sidebar>
	<div ng-controller="StatusNATPageCtrl">
		<juci-config-section>
			<h2 translate>Connections</h2>
			<juci-config-lines>
				<juci-config-line title="{{'Active Connections'|translate}}" no-pull>
					<juci-progress value="load.active_connections" total="load.max_connections"></juci-progress>
				</juci-config-line>
			</juci-config-line>
		</juci-config-section>
		<juci-config-section style="display: none;">
			<juci-config-heading>{{ 'Connections for each Device' | translate }}</juci-config-heading>
			<juci-config-info>{{ 'status.nat.connections.info' | translate }}</juci-config-info>
			<table class="table" style="font-size: 12px;">
				<thead >
					<th>#</th>
					<th>Hostname</th>
					<th  style="text-align: center;">IP</th>
					<th  style="text-align: center;">Nr. of Connections</th>
				</thead>
				<tr ng-repeat="cl in clients track by $index">
					<td>{{$index}}</td>
					<td>{{cl.hostname}}</td>
					<td style="text-align: center;">{{cl.ipaddr}}</td>
					<td style="text-align: center;">{{cl.active_cons||0}}</td>
				</tr>
			</table>
		</juci-config-section>
		<juci-config-section>
			<juci-config-heading>{{ 'NAT Connection Table' | translate }}</juci-config-heading>
			<juci-config-info>{{ 'status.nat.info' | translate }}</juci-config-info>
			<table class="table" style="font-size: 12px">
				<thead>
					<!--<th>IPV6</th>-->
					<th><a href="" ng-click="order('proto')" translate>Protocol</a></th>
					<!--<th>Expires</th>-->
					<th><a href="" ng-click="order('local_ip')" translate>Source</a></th>
					<th><a href="" ng-click="order('remote_ip')" translate>Dest.</a></th>
					<th><a href="" ng-click="order('local_port')" translate>Source Port</a></th>
					<th><a href="" ng-click="order('remote_port')" translate>Dest. Port</a></th>
					<!--<th>RX Packets</th>
					<th>TX Packets</th>
					<th>RX Bytes</th>
					<th>TX Bytes</th>-->
				</thead>
				<tr ng-repeat="con in connections | orderBy:predicate:reverse">
					<!--<td>{{con.ipv6}}</td>-->
					<td>{{con.proto|uppercase}}</td>
					<!--<td>{{con.expires}}</td>-->
					<td>{{con.local_ip}}</td>
					<td>{{con.remote_ip}}</td>
					<td>{{con.local_port}}</td>
					<td>{{con.remote_port}}</td>
					<!--<td>{{con.rx_packets}}</td>
					<td>{{con.rx_bytes}}</td>
					<td>{{con.tx_packets}}</td>
					<td>{{con.tx_bytes}}</td>-->
				</tr>
			</table>
		</juci-config-section>
	</div>
</juci-layout-with-sidebar>
